<template>
	<view class="">
		<u-toast ref="uToast"></u-toast>
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="banner" width="100%" height="400rpx" mode="none"></u-swiper>
		</view>
		<!--icon图标-->
		<u-grid :col="4" :border="false">
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/1.png"></u-image>
				<view class="grid-text ">车型库</view>
			</u-grid-item>
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/2.png"></u-image>
				<view class="grid-text mt24">房车租赁</view>
			</u-grid-item>
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/3.png"></u-image>
				<view class="grid-text mt24">二手房车</view>
			</u-grid-item>
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/4.png"></u-image>
				<view class="grid-text mt24">房车展会</view>
			</u-grid-item>
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/5.png"></u-image>
				<view class="grid-text mt24">露营地</view>
			</u-grid-item>
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/6.png"></u-image>
				<view class="grid-text mt24">新车上市</view>
			</u-grid-item>
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/7.png"></u-image>
				<view class="grid-text mt24">降价优惠</view>
			</u-grid-item>
			<u-grid-item class="top">
				<u-image width="100rpx" height="100rpx" src="/static/home/8.png"></u-image>
				<view class="grid-text mt24">配件用品</view>
			</u-grid-item>
		</u-grid>
		<view style="padding: 30rpx 45rpx;">
			<!-- 评测 -->
			<common :review_info='review_info' timeType='1'></common>
			<view class="line"></view>
			<!-- 视频 -->
			<view class="mainColumn" style="margin-top: 30rpx;" v-if="data.video_info && data.video_info.length >= 1"
				@click="evaluation(1, data.video_info[0].id)">
				<text class="text36 textwbold">{{ data.video_info[0].title }}</text>
				<view class="mainRow" style="margin-top: 30rpx;">
					<u-image width="660rpx" height="400rpx" border-radius="10rpx" :src="data.video_info[0].img"
						style="margin-right: 20rpx;"></u-image>
				</view>
				<view class="mianRow b_color" style="margin-top: 15rpx;">
					<text>{{ data.video_info[0].title }}</text>
					<text style="margin-left: 50rpx;">评论{{ data.video_info[0].comment_count }}</text>
					<text style="margin-left: 50rpx;">{{ data.video_info[0].time }}</text>
				</view>
			</view>
			<view class="line"></view>
			<!-- 新闻 -->
			<view class="mainRow" style="margin-top: 30rpx;" v-if="data.news_info && data.news_info.length >= 1"
				@click="evaluation(2, data.news_info[0].id)">
				<view class="mainColumn">
					<text class="text36 textwbold">{{ data.news_info[0].title }}</text>
					<view class="mainRow b_color" style="margin-top: 70rpx;">
						<!-- <text>{{ data.news_info[0].title }}</text> -->
						<text style="margin-left: 50rpx;">评论{{ data.news_info[0].comment_count }}</text>
						<text style="margin-left: 50rpx;">{{ data.news_info[0].time }}</text>
					</view>
				</view>
				<u-image width="350rpx" height="250rpx" radius="50rpx" :src="data.news_info[0].img[0]"></u-image>
			</view>
			<view class="line"></view>
			<!-- 本地口碑车型 -->
			<view class="">
				<view class="mainRow mainAlignCenter" style="justify-content: space-between;margin-top: 30rpx;">
					<view class="mainRow mainAlignCenter">
						<text style="width: 16rpx;height: 50rpx;background-color: #105CF0;border-radius: 30rpx;"></text>
						<text class="text40 textwbold" style="margin-left: 20rpx;">本地口碑车型</text>
					</view>
					<text style="color: #105CF0;" @click.stop="carSwitch()">换一换</text>
				</view>

				<view class="mainRow" style="margin-top: 30rpx;">
					<view v-for="(car, index) in homeCar" :key="index">
						<view class="mainColumn mainAlignCenter" @click.stop="acquisition(car.id)">
							<image :src="car.img"
								style="margin-right: 20rpx;width: 210rpx;height: 210rpx;border-radius: 10rox;" mode="">
							</image>
							<!-- <u-image width="210rpx" height="210rpx" border-radius="10rpx" :src="car.img" style="margin-right: 20rpx;"></u-image> -->
							<text class="text38 textLine"
								style="margin-top: 20rpx;color: #25262A;width: 200rpx;">{{ car.name }}</text>
							<text class="textLine" style="margin-top: 15rpx;width: 200rpx;">{{ car.name }}</text>
							<text class="text36 textwbold"
								style="margin-top: 20rpx;color: #F37921;">{{ car.price }}万</text>
							<text @click="rockClick(car)"
								style="background-color: #FCDF33;border-radius: 35rpx;text-align: center;padding: 15rpx 35rpx;margin-top: 20rpx;">
								获取底价
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<!-- 热门精选 -->
			<view class="" v-if="data.hot_info && data.hot_info.length >= 1"
				@click="evaluation(3, data.hot_info[0].id)">
				<view class="mainColumn" style="justify-content: space-between;margin-top: 30rpx;">
					<text class="text40 textwbold">热门精选</text>
					<text
						style="width: 80rpx;height: 15rpx;background-color: #105CF0;border-radius: 30rpx;margin-top: 10rpx;margin-left: 40rpx;"></text>
				</view>

				<view class="mainRow mainAlignCenter" style="margin-top: 30rpx;justify-content: space-between;">
					<view class="mainRow mainAlignCenter">
						<u-image width="100rpx" height="100rpx" :src="data.hot_info[0].avatar"
							style="margin-right: 20rpx;"></u-image>
						<text class="text36">{{ data.hot_info[0].username }}</text>
					</view>

					<!-- <view v-show="data.hot_info[0].is_me == 1 ? false : true">
						<text
							v-if="!data.hot_info[0].is_follow"
							@click.stop="follow(data.hot_info[0].user_id)"
							class="guanzhu"
							style="color: white;padding: 10rpx 30rpx;border-radius: 35rpx;"
						>
							关注
						</text>
						<text
							@click.stop="obsolescence(data.hot_info[0].user_id)"
							class="yiguanzhu textwbold"
							v-if="data.hot_info[0].is_follow"
							style="padding: 10rpx 30rpx;border-radius: 35rpx;"
						>
							已关注
						</text>
					</view> -->
					<view v-show="data.hot_info[0].is_me == 1 ? false : true">
						<text :class="data.hot_info[0].is_follow == 0 ?'guanzhu':'yiguanzhu textwbold'"
							@click.stop="followFn(data.hot_info[0].user_id,data.hot_info[0])">
							{{ data.hot_info[0].is_follow == 0 ? "关注" : "已关注" }}
						</text>
					</view>
				</view>
				<view class="" style="margin-top: 30rpx;">
					<text>{{ data.hot_info[0].content }}</text>
				</view>
				<view style=" display: flex;flex-wrap: wrap;justify-content: space-around;">
					<view v-for="(m1, index) in data.hot_info[0].imgs">
						<view style="margin-top: 20rpx;">
							<u-image width="200rpx" height="200rpx" border-radius="10rpx" style="margin-right: 15rpx;"
								:src="m1"></u-image>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<!-- 二手房车推荐 -->
			<view class="">
				<view class="mainRow mainAlignCenter" style="justify-content: space-between;margin-top: 30rpx;">
					<view class="mainRow mainAlignCenter">
						<text style="width: 16rpx;height: 50rpx;background-color: #105CF0;border-radius: 30rpx;"></text>
						<text class="text40 textwbold" style="margin-left: 20rpx;">二手房车推荐</text>
					</view>
					<text style="color: #105CF0;" @click="twoSwitch()">换一换</text>
				</view>

				<view class="mainRow" style="margin-top: 30rpx;">
					<view v-for="(car, index) in two" :key="index" @click="onDetails(car)" class="mainRow_detail">
						<view class="mainColumn mainAlignCenter">
							<!-- 	<u-image width="210rpx" height="210rpx" border-radius="10rpx" :src="car.img" style="margin-right: 20rpx;"></u-image> -->
							<image :src="car.img"
								style="margin-right: 20rpx;width: 210rpx;height: 210rpx;border-radius: 10rpx;"></image>
							<text class="text38 textLine"
								style="margin-top: 20rpx;color: #25262A;width: 200rpx;">{{ car.name }}</text>
							<text class="textLine" style="margin-top: 15rpx;width: 200rpx;">{{ car.name }}</text>
							<text class="text36 textwbold"
								style="margin-top: 20rpx;color: #F37921;">{{ car.price }}万</text>
							<text @click="rockClick(car)"
								style="background-color: #FCDF33;border-radius: 35rpx;text-align: center;padding: 15rpx 35rpx;margin-top: 20rpx;">
								获取底价
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<!-- 评测 -->
			<view class="mainColumn" v-if="data.review_info && data.review_info.length > 1" style="margin-top: 30rpx;"
				@click="evaluation(0, data.review_info[1].id)">
				<text class="text36 textwbold">{{ data.review_info[1].title }}</text>
				<view class="mainRow" style="margin-top: 30rpx;">
					<view v-for="(m, index) in data.review_info[1].img" :key="index">
						<u-image width="210rpx" height="200rpx" border-radius="10rpx" :src="m"
							style="margin-right: 20rpx;"></u-image>
					</view>
				</view>
				<view class="mianRow text32 b_color" style="margin-top: 15rpx;">
					<text>{{ data.review_info[1].title }}</text>
					<text style="margin-left: 50rpx;">评论{{ data.review_info[1].comment_count }}</text>
					<text style="margin-left: 50rpx;">{{ data.review_info[1].time }}</text>
				</view>
			</view>

			<!-- 视频 -->
			<view class="mainColumn" v-if="data.video_info && data.video_info.length > 1" style="margin-top: 30rpx;"
				@click="evaluation(1, data.video_info[1].id)">
				<text class="text36 textwbold">{{ data.video_info[1].title }}</text>
				<view class="mainRow" style="margin-top: 30rpx;">
					<u-image width="660rpx" height="400rpx" border-radius="10rpx" :src="data.video_info[1].img"
						style="margin-right: 20rpx;"></u-image>
				</view>
				<view class="mianRow b_color" style="margin-top: 15rpx;">
					<text>{{ data.video_info[1].title }}</text>
					<text style="margin-left: 50rpx;">评论{{ data.video_info[1].comment_count }}</text>
					<text style="margin-left: 50rpx;">{{ data.video_info[1].time }}</text>
				</view>
			</view>

			<!-- 新闻 -->
			<view class="mainRow" style="margin-top: 30rpx;" v-if="data.news_info && data.news_info.length >= 1"
				@click="evaluation(2, data.news_info[1].id)">
				<view class="mainColumn">
					<text class="text36 textwbold">{{ data.news_info[1].title }}</text>
					<view class="mainRow b_color" style="margin-top: 70rpx;">
						<!-- <text>{{ data.news_info[1].title }}</text> -->
						<text style="margin-left: 50rpx;">评论{{ data.news_info[1].comment_count }}</text>
						<text style="margin-left: 50rpx;">{{ data.news_info[1].time }}</text>
					</view>
				</view>
				<u-image width="350rpx" height="250rpx" radius="50rpx" :src="data.news_info[1].img[0]"></u-image>
			</view>
			<view class="line"></view>
			<!-- 热门精选 -->
			<view class="" v-if="data.hot_info && data.hot_info.length > 1" @click="evaluation(3, data.hot_info[1].id)">
				<view class="mainRow mainAlignCenter" style="margin-top: 30rpx;justify-content: space-between;">
					<view class="mainRow mainAlignCenter">
						<u-image width="100rpx" height="100rpx" :src="data.hot_info[1].avatar"
							style="margin-right: 20rpx;"></u-image>
						<text class="text36">{{ data.hot_info[1].username }}</text>
					</view>

					<!-- <view v-show="data.hot_info[1].is_me == 1 ? false : true">
						<text v-if="!data.hot_info[1].is_follow" @click.stop="follow(data.hot_info[1].user_id)"
							class="guanzhu" style="color: white;padding: 10rpx 30rpx;border-radius: 35rpx;">
							关注
						</text>
						<text @click.stop="obsolescence(data.hot_info[1].user_id)" class="yiguanzhu textwbold"
							v-if="data.hot_info[1].is_follow" style="padding: 10rpx 30rpx;border-radius: 35rpx;">
							已关注
						</text>
					</view> -->
					<view v-show="data.hot_info[1].is_me == 1 ? false : true">
						<text :class="data.hot_info[1].is_follow == 0 ? 'guanzhu':'yiguanzhu textwbold'"
							@click.stop="followFn(data.hot_info[1].user_id,data.hot_info[1])">
							{{ data.hot_info[1].is_follow == 0 ? "关注" : "已关注" }}
						</text>
					</view>
				</view>
				<view class="" style="margin-top: 30rpx;">
					<text>{{ data.hot_info[1].content }}</text>
				</view>
				<view style=" display: flex;flex-wrap: wrap;justify-content: space-around;">
					<view v-for="(m1, index) in data.hot_info[1].imgs">
						<view style="margin-top: 20rpx;">
							<u-image width="200rpx" height="200rpx" border-radius="10rpx" style="margin-right: 15rpx;"
								:src="m1"></u-image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {  getChart  } from '@/api/ad.js'
import { homeData , carSecondhand } from '@/api/home.js'
import { followUser , cancelUser } from '@/api/me.js'
import common from '../common/common.vue'
import { mapState   } from 'vuex'
import { mixin } from "../../mixins/mixin.js"
export default {
	mixins:[mixin],
	components:{
		common
	},
	data() {
		return {
			banner: [],
			data: [],
			homeCar: [],
			two: [],
			review_info:{}
		};
	},
	computed:{
		...mapState({
			status:state=>state.user.status
		})
	},
	onTabItemTap(e) {
		// tab 点击时执行，此处直接接收单击事件
		//console.log('54411');
	},
	created() {
		uni.$on('test', res => {
			//更新首页数据
			if( res=='test'){
				this.homeData();
			}
		});
		this.getchart();
		this.homeData();
		this.getSecondhand();
		// this.getCar();
	},
	methods: {
		//跳转车型库
		Jump() {
			uni.switchTab({
				url: '../../pages/my/modelLibrary/modelLibrary'
			});
		},
		//转跳到详情页
		onDetails(item) {
			uni.navigateTo({
				url: '../../pages/my/usedCar/usedCarDetails?id=' + item.id
			});
		},
		//进入车型详情
		acquisition(id) {
			uni.navigateTo({
				url: `../../pages/my/modelLibrary/details?id=${id}`
			});
		},

		//点击进入自己的详情
		evaluation(index, id) {
			switch (index) {
				case 0:
					uni.navigateTo({
						url: `../../pages/Video-details/evaluation-details?id=${id}`
					});
					console.log(id);
					break;
				case 1:
					uni.navigateTo({
						url: '../../pages/Video-details/Video-details' + `?id=${id}`
					});
					console.log(id);
					break;
				case 2:
					uni.navigateTo({
						url: `../../pages/News-detail/News-detail?id=${id}`
					});
					console.log(id);
					break;
				case 3:
					// uni.$emit('control', { index: 3 });
					uni.navigateTo({
						url: `../../pages/mian/mainDetails?id=${id}`
					});
					console.log(id);
					break;
			}
		},
		//跳转低价
		rockClick(item) {
			let list = {
				img: item.img,
				name: item.name,
				price: item.price,
				id: item.id
			};
			uni.navigateTo({
				url: '../../pages/my/modelLibrary/floorPrice?list=' + JSON.stringify(list)
			});
		},
		//首页评测
		homeData() {
			homeData({
				"_mall_id":1,
				"r":'api/home/indexs'
			}).then(res => {
				this.data = res.data;
				this.review_info = res.data.review_info[0];
			});
		},
		//轮播图
		getchart() {
			getChart({
				_mall_id:'1',
				r:'api/chart/list',
				type:2
			}).then(res => {
				res.data.list.forEach( item => {
					this.banner.push(item.img);
				});
			});
		},
		//本地口碑车型
		getCar() {
			var self = this;
			this.$u.api.homeCar({}).then(res => {
				self.homeCar = res.data;
			});
		},
		//本地口碑车型--换一换
		carSwitch() {
			this.getCar();
			this.$refs.uToast.show({
				title: '切换成功',
				type: 'success'
			});
		},
		//二手车推荐
		getSecondhand() {
			carSecondhand({
				'_mall_id':1,
				'r':'api/home/car-secondhand'
			}).then(res => {
				this.two = res.data;
			});
		},
		//二手车推荐--换一换
		twoSwitch() {
			this.getSecondhand();
			this.$refs.uToast.show({
				message:'切换成功',
				type:'success'
			})
		},
		two2() {
			uni.switchTab({
				url: '/pages/tabBar/usedCar'
			});
		},
		news() {
			uni.navigateTo({
				url: '/pages/tabBar/newCar'
			});
		},
		zu() {
			uni.switchTab({
				url: '/pages/tabBar/lease'
			});
		}
	}
};
</script>


<style lang="scss" scoped>
	.top {
		margin: 20rpx 0;

		.grid-text {
			font-size: 34rpx;
			margin-top: 20rpx;
		}
	}

	.yiguanzhu {
		border: 1rpx solid #c4c4c4;
		color: #c4c4c4;
		padding: 10rpx 30rpx;
		border-radius: 35rpx;
	}

	.guanzhu {
		background: linear-gradient(114deg, #497fef 0%, #6543d8 100%);
		color: white;
		padding: 10rpx 30rpx;
		border-radius: 35rpx;
	}

	.line {
		margin-left: -15rpx;
		width: 100%;
		height: 2rpx;
		margin-top: 10rpx;
		background-color: rgba(138, 134, 134, 0.3);
	}

	.b_color {
		color: #6f6d6d;
		font-size: 28rpx;
	}

	.swiper {
		margin: 30rpx;
	}

	.mainColumn {
		display: flex;
		flex-direction: column;

		.mainRow {
			display: flex;
		}
	}

	.mainRow {
		display: flex;
		.mainRow_detail
		{
			display: flex;
			flex-direction: column;
			
		}
	}
</style>